<template>
  <BasicDrawer @register="registerBaseDrawer" :title="title" width="1200" destroyOnClose>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd"> 新增</a-button>

        <a-dropdown v-if="checkedKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="bx:bx-unlink"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="ant-design:down-outlined"></Icon>
          </a-button>
        </a-dropdown>
      </template>

      <template #img="{ text }">
       <TableImg v-if="text" :size="60" :simpleShow="true" :imgList="[text]" />
     </template>

      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"/>
      </template>
    </BasicTable>
    <GrowthcyclePropertitesModal @register="propertitesModal" @success="handleSuccess"></GrowthcyclePropertitesModal>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { useModal } from '/@/components/Modal';
import { list, deleteOne, batchDelete } from './GrowthcyclePropertites.api';
import { columns, searchFormSchema } from './GrowthcyclePropertites.data';
import GrowthcyclePropertitesModal from './GrowthcyclePropertitesModal.vue';

const [propertitesModal, { openModal }] = useModal();

const checkedKeys = ref<Array<string | number>>([]);
const growthcycleId = ref('');

const title = ref('生长周期属性');
const [registerBaseDrawer] = useDrawerInner(async (data) => {
    console.log(data);
    title.value = '生长周期属性（'+data.category_dictText+'-'+data.name+'）';
    growthcycleId.value = data.id;
    setProps({ searchInfo: { growthcycleId: data.id } });
    reload();
});

const [registerTable, { reload, setProps }] = useTable({
  title: '属性列表',
  api: list,
  size: "small",
  columns: columns,
  formConfig: {
    labelWidth: 60,
    schemas: searchFormSchema,
    baseRowStyle: { maxHeight: '20px' },
    autoSubmitOnEnter: true,
  },
  striped: true,
  useSearchForm: true,
  showTableSetting: true,
  clickToRowSelect: false,
  bordered: true,
  showIndexColumn: false,
  tableSetting: { fullScreen: true },
  canResize: false,
  rowKey: 'id',
  actionColumn: {
    title: '操作',
    width: 100,
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: undefined,
  },
});

const rowSelection = {
  type: 'checkbox',
  columnWidth: 50,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange,
};

function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

async function handleDelete(record) {
  await deleteOne({ id: record.id }, reload);
}

async function batchHandleDelete() {
  await batchDelete({ ids: checkedKeys.value.join(',') }, reload);
}

function handleSuccess() {
  reload();
}

function handleAdd() {
  openModal(true, {
    growthcycleId: growthcycleId.value,
    isUpdate: false,
    showFooter: true,
  });
}

function getTableAction(record) {
  return [
    {
      label: '编辑',
      onClick: () => {
        openModal(true, {
          record,
          isUpdate: true,
          showFooter: true,
        });
      },
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style>
.cell-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>